/**
* @作者:邹蕴果
* @创建时间：2021/7/9
* @修改时间：2021/7/10
*/


<template>
	<view class="main">
		<!-- 头部导航栏 -->
		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 176rpx; height: 99rpx;" fit="cover" class="logo"
				@click="jumpToMain">
			<view class="navitems">
				<view class="navitem" @click="jumptoLogIn" v-if="!isLogin">登录</view>
				<el-badge :value="messageNum" class="navitem" v-if="isLogin" hidden="messageNum==0">
					<view @click="jumpToMessage">消息</view>
				</el-badge>
				<view class="navitem" @click="logOut" v-if="isLogin">退出登录</view>
			</view>
		</view>
		<view class="body">
			<!-- 搜索栏 -->
			<div class="search">
				<el-input class="searchInput" type="text" placeholder="请输入想要租赁的商品" v-model="searchText">
				</el-input>
				<div class="searchEmtpy"></div>
				<el-button class="search-btn" icon="el-icon-search" @click="re_search" type="primary">搜索</el-button>
			</div>
			<!-- 导航栏 -->

			<view class="breadcrumb">
				<view class="breadcrumb_content">
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item :to="{ path: '/' }" style="font-size: 17px">首页</el-breadcrumb-item>
						<!-- <el-breadcrumb-item style="font-size: 17px" v-if="">{{value1}}/{{value2}}</el-breadcrumb-item> -->
					</el-breadcrumb>
				</view>
			</view>
			<!-- 排序方式栏 -->
			<view class="Row2">
				<view class="screentext">排序方式</view>
				<el-select v-model="SearchMethod" collapse-tags placeholder="排序方式" @change="handleSelect">
					<el-option v-for="item in SearchOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</view>
			<view class="goodsRow">

				<el-card v-for="one in goodstake" shadow="hover" class="goodItem" @click.native="jumpToDetail(one.id)">
					<div class="recCard-image">
						<el-image style="width: 100%;height: 100%;"
							:src='"http://47.96.168.135:7388"+one.skuImages[0].url' fit="contain"
							v-if="one.skuImages.length!=0"></el-image>
					</div>
					<div style="padding: 14px;">
						<span>{{one.name}}</span>
						<view style="color: #FF0000; margin-top: 15rpx;" v-if="one.skuSpecificationOptions.length!=0">
							¥{{one.skuSpecificationOptions[0].price}} 起
						</view>
					</div>
				</el-card>
			</view>
			<el-pagination background layout=" pager" class="pager" :total=10 @current-change="handlepageChange">
			</el-pagination>
		</view>
	</view>
	</view>
</template>

<script>
	const searchOptions=['索尼','任天堂','微软','世嘉']
	
	export default {

		data() {
			return {
				value1: "",
				value2: "",
				brands: [],
				radio1: "全部",
				firstid: '',
				curnum: 1,
				pagShow: true,
				searchText: '',
				goodstake: [],
				sumOfSku: 0,
				checkAll: false,
				checkedOptions: [],
				checkoptions: searchOptions,
				isIndeterminate: true,
				SearchOptions: [{
					value: '默认',
					label: '默认'
				}, {
					value: '销量降序',
					label: '销量降序'
				}, {
					value: '销量升序',
					label: '销量升序'
				}, {
					value: '价格降序',
					label: '价格降序'
				}, {
					value: '价格升序',
					label: '价格升序'
				}],
				curPage: 1,
				responseForm: [],
			}
		},
		mounted: function() {
			this.change()
		},
		methods: {
			//重新搜索
			re_search() {
				this.change()
			},

			handleCheckAllChange(val) {
				this.checkedOptions = val ? searchOptions : [];
				this.isIndeterminate = false;
			},
			//选择排序方式处理函数
			handleSelect(val) {

				console.log(val)

				var temp = [];

				switch (val) {
					case "销量升序":
						temp = this.responseForm.sort(function(a, b) {
							return a.sales - b.sales;
						});
						break;
					case "销量降序":
						temp = this.responseForm.sort(function(a, b) {
							return b.sales - a.sales;
						})
						break;
					case "价格降序":
						temp = this.responseForm.sort(function(a, b) {
							return b.skuSpecificationOptions[0].price - a.skuSpecificationOptions[0].price;
						})
						console.log(val)
						break;
					case "价格升序":
						temp = this.responseForm.sort(function(b, a) {
							return b.skuSpecificationOptions[0].price - a.skuSpecificationOptions[0].price;
						})
						break;
					default:
						temp = this.responseForm;
						break;
				}
				this.goodstake = (this.sumOfSku >= 12 * this.curPage) ?
					temp.slice(12 * (this.curPage - 1), 12 * this.curPage) :
					temp.slice(12 * (this.curPage - 1), this.sumOfSku);
			},

			//页码改变重新加载
			handlepageChange(val) {
				this.curPage = val;
				this.goodstake = (this.sumOfSku >= 12 * this.curPage) ?
					this.responseForm.slice(12 * (this.curPage - 1), 12 * this.curPage) :
					this.responseForm.slice(12 * (this.curPage - 1), this.sumOfSku);
			},


			async change() {
				this.curPage = 1;
				this.value2 = "默认";
				await this.$axios({
					method: 'get',
					url: '/SKU/find?KeyWords=' + this.searchText
				}).then(response => {
					this.sumOfSku = response.data.date.length;
					this.responseForm = response.data.date
				});
				this.goodstake = (this.sumOfSku >= 12 * this.curPage) ?
					this.responseForm.slice(12 * (this.curPage - 1), 12 * this.curPage) :
					this.responseForm.slice(12 * (this.curPage - 1), this.sumOfSku);
			},

			jumpToDetail: function(id) {
				uni.redirectTo({
					url: 'GoodsDetail?id=' + id + '&value1=' + this.value1 + '&value2=' + this.value2
				})
			},

			onLoad(option) {
				this.searchText = option.searchText
				this.value1 = option.id1;
				this.value2 = option.id2;

			},

			onShow() {
			}
		},
	}
</script>

<style>
	.body {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.jump {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		justify-content: center;
		align-items: center;
		float: left;
	}

	/* 顶栏style */
	.header {
		width: 100%;
		height: 99rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	.logo {
		margin-left: 5%;
	}

	.navitems {
		margin: auto;
		display: flex;
		margin-right: 5%;
	}

	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}

	/* 搜索框 */
	.search {
		margin: auto;
		display: flex;
		width: 53%;
		margin-top: 40rpx;
		margin-bottom: 30rpx;
	}

	.searchEmtpy {
		width: 2%;
	}

	/* 面包屑 */
	.breadcrumb {
		width: 100%;
		transform: translateX(100px);
		background-color: #EEEEEE;
		height: 30px;
		transform: translateX(-0px);
		transform: translateY(-3px);
	}

	.breadcrumb_content {
		display: flex;
		width: 100%;
		margin-left: 6%;
		margin-top: 0.1cm;
	}

	.screentext {
		width: 100px;
		font-size: 10rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		color: #707070;
	}

	.Row1 {
		width: 87%;
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #F0F0F0;
		padding-bottom: 20rpx;
		margin-left: 6%;
	}

	.Row2 {
		width: 87%;
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #F0F0F0;
		padding-bottom: 20rpx;
		margin-top: 30rpx;
		margin-left: 6%;
	}

	.goodsRow {
		margin-top: 80rpx;
		margin-left: 4%;
		margin-right: 4%;
	}

	.recCard-image {
		width: 100%;
		height: 400rpx;
	}

	.goods {
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	.goodItem {
		width: 18.5%;
		border-radius: 5;
		border-color: #f0f0f0;
		height: 600rpx;
		text-align: center;
		float: left;
		margin-left: 1%;
	}

	.goodimage {
		width: 100%;
		height: 70%;
	}

	.pager {
		margin: 0 auto;
		margin-top: 80rpx;
	}
</style>
